<template>
	<view class="container">
		<!-- 日期选择 -->
		<view class="form-item">
			<text class="label">日期</text>
			<picker mode="date" :value="selectedDate" @change="onDateChange">
				<view class="picker">{{ selectedDate }}</view>
			</picker>
		</view>

		<!-- 教师选择 -->
		<view class="form-item">
			<text class="label">教师</text>
			<picker mode="selector" :range="teachers" range-key="nickName" @change="onTeacherChange">
				<view class="picker">
					{{ selectedTeacherName || '请选择教师' }}
				</view>
			</picker>
		</view>

		<!-- 课程选择 -->
		<view class="form-item">
			<text class="label">课程</text>
			<picker mode="selector" :range="courses" range-key="classTopic" @change="onCourseChange">
				<view class="picker">
					{{ selectedCourseName || '请选择课程' }}
				</view>
			</picker>
		</view>

		<!-- ✅ 新增：会议号输入 + 提交按钮（同一行） -->
		<view class="form-item">
			<text class="label">会议号</text>
			<view class="meeting-input-row">
				<input class="meeting-input" v-model="meetingCode" placeholder="请输入会议号"
					placeholder-style="color:#999;font-size:26rpx;" />
				<button class="meeting-btn" @click="submitMeetingCode">提交</button>
			</view>
		</view>


		<!-- 学生选择 -->
		<view class="form-item">
			<text class="label">学生</text>
			<picker mode="selector" :range="students" range-key="displayName" @change="onStudentChange">
				<view class="picker">
					{{ selectedStudent || '请选择学生' }}
				</view>
			</picker>
		</view>

		<!-- 上课按钮 -->
		<view class="btn-box">
			<button class="submit-btn" @click="submitClass">上课</button>
			<button class="submit-btn" @click="checkInRecordByClassId">刷新</button>
		</view>

		<!-- 已签到学生区域 -->
		<view class="signed-section" v-if="signedStudents.length">
			<text class="signed-title">已签到学生</text>
			<view class="student-list">
				<view class="student-card" v-for="(stu, index) in signedStudents" :key="stu.id">
					<text class="student-name">{{ stu.name }}</text>
					<text class="remove-btn" @click="removeStudent(stu.id)">✕</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				name: "Attendance Form",
				selectedDate: "", // 默认日期
				students: [],
				selectedStudent: "",
				selectedStudentId: "",
				signedStudents: [], // ✅ 已签到学生列表
				courses: [],
				selectedCourse: "",
				meetingCode: "",
				selectedCourseName: "", // 存课程名
				teachers: [], // 老师列表
				selectedTeacherId: "", // 存 userId
				selectedTeacherName: "" // 存 nickName
			};
		},
		mounted() {
			// 默认设为今天
			const today = new Date();
			const yyyy = today.getFullYear();
			const mm = String(today.getMonth() + 1).padStart(2, "0");
			const dd = String(today.getDate()).padStart(2, "0");
			this.selectedDate = `${yyyy}-${mm}-${dd}`;
			this.selectTeacherList();
			this.getStudentAll();
		},
		methods: {
			// ✅ 新增：提交会议号
			submitMeetingCode() {
				if (!this.meetingCode || !this.meetingCode.trim()) {
					uni.showToast({
						title: '请输入会议号',
						icon: 'none'
					});
					return;
				}

				if (!this.selectedCourse) {
					uni.showToast({
						title: '请选择课堂',
						icon: 'none'
					});
					return;
				}

				// 这里按需接接口，比如：
				// api.submitMeetingCode({ meetingCode: this.meetingCode, classId: this.selectedCourse }).then(...)
				console.log('提交会议号：', this.meetingCode, '对应课堂：', this.selectedCourse);
				api.submitMeetingCode({
					meetingNo: this.meetingCode,
					classDetailId: this.selectedCourse
				}).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								title: '会议号已提交',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					rej => {}
				);

			},
			getStudentAll() {
				var that = this
				api.getStudentAll().then(
					res => {
						if (res.code == 200) {
							this.students = res.data.map(s => {
								return {
									...s,
									displayName: `${s.studentEnglishName} (${s.studentName})`
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					rej => {}
				);
			},
			selectTeacherList() {
				var that = this
				api.selectTeacherList().then(
					res => {
						if (res.code == 200) {
							this.teachers = res.data; // 直接赋值接口返回的对象数组
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					rej => {}
				);
			},
			getClassByDateAndTeacher() {
				var that = this
				api.getClassByDateAndTeacher({
					'startDate': this.selectedDate,
					'teacherId': this.selectedTeacherId,
				}).then(
					res => {
						if (res.code == 200) {
							this.courses = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					},
					rej => {}
				);
			},
			onDateChange(e) {
				this.selectedDate = e.detail.value;
				uni.showToast({
					title: `已选择日期：${this.selectedDate}`,
					icon: "none"
				});
				this.getClassByDateAndTeacher();
			},
			onCourseChange(e) {
				const index = e.detail.value;
				const course = this.courses[index];
				this.selectedCourse = course.id;
				this.selectedCourseName = course.classTopic;
				this.checkInRecordByClassId();
				this.getClaseById();
			},
			checkInRecordByClassId() {
				api.checkInRecordByClassId({
					classId: this.selectedCourse
				}).then(res => {
					if (res.code == 200) {
						this.signedStudents = res.data.map(stu => ({
							id: stu.id,
							name: `${stu.studentEnglishName} (${stu.studentName})`
						}));
						console.log(this.signedStudents)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			getClaseById(){
				if (!this.selectedCourse) {
					uni.showToast({
						title: '请选择课堂',
						icon: 'none'
					});
					return;
				}
				api.getClaseById({
					'id': this.selectedCourse,
				}).then(
					res => {
						if (res.code == 200) {
							this.meetingCode = res.data.reviewMaterials;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
				
					},
					rej => {}
				);
			},
			onStudentChange(e) {
				const index = e.detail.value;
				const studet = this.students[index];
				this.selectedStudentId = studet.id;
				// 拼接英文+中文
				this.selectedStudent = `${studet.studentEnglishName} (${studet.studentName})`;
			},
			// 选择老师
			onTeacherChange(e) {
				const index = e.detail.value;
				const teacher = this.teachers[index];
				this.selectedTeacherId = teacher.userId; // 存 id
				this.selectedTeacherName = teacher.nickName; // 存名字
				this.getClassByDateAndTeacher();
			},
			submitClass() {
				if (!this.selectedCourse || !this.selectedStudent) {
					uni.showToast({
						title: "请先选择课程和学生",
						icon: "none"
					});
					return;
				}
				api.checkInRecord({
					'classId': this.selectedCourse,
					'studentId': this.selectedStudentId,
				}).then(
					res => {
						if (res.code == 200) {
							this.checkInRecordByClassId();
							uni.showToast({
								title: `${this.selectedStudent} 签到成功`,
								icon: "success"
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					},
					rej => {}
				);

			},
			removeStudent(index) {
				api.deleteCheckInRecord({
					'id': index
				}).then(
					res => {
						if (res.code == 200) {
							this.checkInRecordByClassId();
							uni.showToast({
								title: `已取消 ${removed.name} 的签到`,
								icon: "none"
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					},
					rej => {}
				);

			}
		}
	};
</script>

<style>
	.container {
		min-height: 100vh;
		padding: 30rpx;
		background: linear-gradient(to bottom, #e6f4ea 0%, #fdfaf4 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.label {
		width: 120rpx;
		font-size: 28rpx;
		color: #333;
	}

	picker {
		width: 85%;
	}

	.picker,
	.value {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		font-size: 28rpx;
	}

	/* ✅ 新增：会议号这一行的布局 */
	.meeting-input-row {
		width: 85%;
		display: flex;
		align-items: center;
	}

	.meeting-input {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.meeting-btn {
		margin-left: 20rpx;
		padding: 0 26rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 12rpx;
		font-size: 26rpx;
		background-color: #4caf50;
		color: #fff;
	}

	.btn-box {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
	}

	.submit-btn {
		width: 300rpx;
		background-color: #4caf50;
		color: #fff;
		border-radius: 30rpx;
		font-size: 30rpx;
	}

	/* 已签到区域 */
	.signed-section {
		margin-top: 50rpx;
	}

	.signed-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.student-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.student-card {
		position: relative;
		background: #fff;
		padding: 20rpx 40rpx 20rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		font-size: 28rpx;
	}

	.student-name {
		color: #333;
	}

	.remove-btn {
		position: absolute;
		top: 6rpx;
		right: 12rpx;
		color: #e53935;
		font-size: 28rpx;
	}
</style>